input[type="file"]::-webkit-file-upload-button {
  cursor: pointer;
}


.topImage {
  height: 650px;
  width: 1920px;
  background: url('../images/brand/ppsj_banner_img.png') no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}
.topImage .topTitle {
  position: absolute;
  top: 226px;
  left: 0;
  right: 0;
  margin: auto;
  width:640px;
  font-size:80px;
  font-weight:bold;
  color:rgba(255,255,255,1);
  opacity:1;
}
.topImage .redLine {
  position: absolute;
  top: 336px;
  left: 0;
  right: 0;
  margin: auto;
  width:200px;
  height:8px;
  background:rgba(211,20,28,1);
  opacity:1;
}
.content {
  width: 100%;
  background: #F5F5F5;
  position: relative;
  z-index: 6;
  min-height:1249px;
}
.content .formContent {
  position: relative;
  top: -168px;
  margin: auto;
  left: 0;
  right: 0;
  width:1200px;
  min-height:1317px;
  background:rgba(255,255,255,1);
  box-shadow:0px 0px 20px rgba(159,159,159,0.16);
  opacity:1;
  border-radius:10px;
  padding: 74px 170px 60px 170px;
}

.formContent .needInputGroup {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.formContent .needInputGroup li{
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.label span {
  display: inline-block;
  width:64px;
  font-weight:400;
  position: relative;
}
.label span::after {
  content: '*';
  position: absolute;
  margin: auto;
  top: 3px;
  right: -20px;
  font-size:16px;
  font-weight:800;
  color:rgba(211,20,28,1);
}
/* .need .active {}
.need .success {
  border: 1px solid #67C23A !important;
} */
.need .error {
  border: 1px solid #F56C6C !important;
}
.need .error .textCount {
  display: none;
}
.need .error .status {
  background: url('../images/ts_cw_icon.png') no-repeat;
  background-size: cover;
  background-position: center;
  width: 16px;
  height: 16px;
  margin-left: 20px;
}
.formContent li .need{
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.formContent li .need .label{
  width: 134px;
  display: flex;
  align-items: center;
  font-size:16px;
  color:rgba(51,51,51,1);
}
.formContent li .need .label input{
  background: transparent;
  border: none;
  width: 86px;
  font-size:16px;
  font-weight:400;
  color:rgba(51,51,51,1);
}

.formContent li .need .appendTextarea {
  display: flex;
  align-items: center;
  font-size:16px;
  font-weight:400;
  color:rgba(153,153,153,1);
  cursor: pointer;
}
.formContent li .need .appendTextarea img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
/* ============================================================================== */

.formContent li .need .inputGroup{
  padding: 0 20px;
  height: 40px;
  background:rgba(255,255,255,1);
  border: 1px solid rgba(223,223,223,1);
  border-radius: 10px;
  flex: 1;
  font-size: 14px;
  font-weight: 400;
  color:rgba(153,153,153,1);
  display: flex;
  align-items: center;
}
.formContent li .need .inputGroup input {
  background: transparent;
  border: none;
  height: 100%;
  flex: 1;
}
.formContent li .need .inputGroup .textCount {
  padding-left: 20px;
  font-size:12px;
  font-weight:400;
  color:rgba(189,189,189,1);
}

.formContent li .need .textareaGroup {
  height:80px;
  background:rgba(251,251,251,1);
  border:1px solid rgba(223,223,223,1);
  border-radius:10px;
  flex: 1;
  font-size: 14px;
  font-weight: 400;
  color:rgba(153,153,153,1);
  display: flex;
  align-items: center;
  position: relative;
}
.formContent li .need .textareaGroup textarea {
  padding: 13px 20px;
  position: absolute;
  background: transparent;
  border: none;
  height: 100%;
  width: 100%;
}
.formContent li .need .textareaGroup .textCount {
  background: rgba(255, 255, 255, .3);
  position: absolute;
  right: 18px;
  bottom: 10px;
  font-size:12px;
  font-weight:400;
  color:rgba(189,189,189,1);
}
/* ============================================================================== */
.formContent li .need .needFileGroup {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.formContent li .need .needFileGroup .info {
  padding-top: 20px;
  width: 100%;
  font-size:14px;
  font-weight:400;
  color:rgba(189,189,189,1);
}
.formContent li .need .needFile {
  width:175px;
  height:175px;
  /* margin-right: 9px; */
  background:rgba(251,251,251,1);
  border:1px solid rgba(223,223,223,1);
  border-radius:10px;
  overflow: hidden;
  position: relative;
}
.formContent li .need .needFile label {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.formContent li .need .needFile .mark {
  width: 100%;
  height: 100%;
  color: white;
  position: absolute;
  display: none;
  justify-content: center;
  align-items: center;
  font-size: 26px;
  background:#FBFBFB;
}
.formContent li .need .needFile .mark img {
  width: 80%
}
.formContent li .need .needFile .uploadFail {
  width: 100%;
  height: 100%;
  color: white;
  position: absolute;
  display: none;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: absolute;
  font-size: 26px;
  width: 100%;
  height: 100%;
  background:#DCDCDC;
}
.formContent li .need .needFile .uploadFail img {
  width: 24px;
  height: 24px;
}
.formContent li .need .needFile .uploadFail button {
  margin-top: 20px;
  width:80px;
  height:26px;
  border:1px solid rgba(211,20,28,1);
  border-radius:20px;
  font-size:14px;
  font-weight:400;
  color:rgba(211,20,28,1);
}
.formContent li .need .needFile .showImage {
  position: absolute;
  width: 100%;
  height: 100%;
}
.formContent li .need .needFile .deleteCurrentImage {
  z-index: 1;
  display: none;
  position: absolute;
  width: 30px;
  height: 30px;
  top: 0px;
  right: 0px;
}
.formContent li .need .needFile .slotClass {
  width: 100%;
  height: 100%;
  position: absolute;
  font-size:24px;
  font-weight:400;
  color:rgba(189,189,189,1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.formContent li .need .needFile .slotClass img {
  height: 28px;
  width: 30px;
  margin-bottom: 20px;
}
.formContent li .need .needFile .slotClass .label {
  width: auto !important;
}
.formContent li .need .needFile .slotClass .label span::after {
  right: -13px;
}
.formContent li .need .needFile .fileClass {
  display: none;
  cursor: pointer;
  left:0;
  right:0;
  top:0;
  bottom:0;
}
/* ============================================================================== */

.formContent li .need .validateGroup{
  width:400px;
  height:40px;
  display: flex;
  justify-content: space-between;
}

.formContent li .need .validateGroup .imgInput {
  padding: 13px 20px;
  width:298px;
  height:100%;
  background:rgba(255,255,255,1);
  border:1px solid rgba(223,223,223,1);
  border-radius:10px;
}
.formContent li .need .validateGroup .img {
  width:92px;
  height:40px;
  background:rgba(255,255,255,1);
  border:1px solid rgba(223,223,223,1);
  border-radius:10px;
  overflow: hidden;
}
.formContent li .need .validateGroup .img img {
  width: 100%;
  height: 100%;
}

/* ============================================================================== */

.formContent li .need .phoneGroup{
  border:1px solid rgba(223,223,223,1);
  border-radius:10px;
  padding: 0 20px;
  width:400px;
  /* height:40px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.formContent li .need .phoneGroup input{
  height:40px;
  background: transparent;
  border: none;
  flex: 1;
}

/* ============================================================================== */

.formContent li .need .codeGroup {
  padding: 8px 20px;
  width:400px;
  height:40px;
  background:rgba(255,255,255,1);
  border:1px solid rgba(223,223,223,1);
  border-radius:10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.formContent li .need .codeGroup input{
  background: transparent;
  border: none;
  height: 100%;
  flex: 1;
}
.getCode {
  cursor: pointer;
  border-left: 1px solid rgba(223,223,223,1);
  display: flex;
  align-items: center;
  padding-left: 20px;
  /* width: 78px; */
  height:24px;
  font-size:14px;
  font-weight:400;
  color:rgba(0,127,167,1);
}
/* ============================================================================== */

.formContent .errorText {
  color: #D3141C;
  display: flex;
  margin-top: 10px;
  /* height: 60px; */
  align-items: center;
  overflow: hidden;
  width: 100%;
}
.formContent .errorText img {
  margin-right: 10px;
  height: 20px;
  width: 20px;
}
.formContent .buttonSubmit {
  margin: auto;
  margin-top: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  width:564px;
  height:50px;
  background:rgba(211,20,28,1);
  border-radius:10px;
  font-size:16px;
  font-weight:400;
  color:rgba(255,255,255,1);
}


.toast {
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 442px;
  height: 138px;
  color: white;
  background: rgba(0,0,0,0.56);
  border-radius:10px;
  padding: 24px 76px 48px 76px;
  display: flex;
  align-items: center;
  flex-direction: column;
  display: none;
}

.toast .title{
  font-size:20px;
  font-weight:bold;
}
.toast .text{
  padding-top: 28px;
  font-size:18px;
  font-weight:400;
}